<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Arvore</title>
</head>
<script>
var nivelAtual = -1;
function escolheOpcao(){
	if(nivelAtual>=0){
		var select = document.getElementById("opcoes");
		//alert(nivelAtual+","+select.options[select.selectedIndex].value);
		document.appletTree.escolheOpcao(nivelAtual,select.options[select.selectedIndex].value);
		preencheOpcoes(nivelAtual+1);
	}	
}

function escolheOrdem(){
	if(!document.appletTree.hasEscolheu()){
		var escolhidos = document.getElementById('escolhidos');
		var ordem = new Array(document.appletTree.qntNiveis());
		var i;
		for(i=0;i<document.appletTree.qntNiveis();i++){
			ordem[i] = escolhidos.options[i].value;
		}
		var arrayAsString = ordem.join(' ');	
		document.appletTree.escolheOrdem(arrayAsString);
		preencheOpcoes(0);
		escolhidos.disabled = true;
		document.getElementById("escolher").style.visibility='hidden';
		document.getElementById("tmpOptions").style.visibility='hidden';
		document.getElementById("up").style.visibility='hidden';
		document.getElementById("down").style.visibility='hidden';
	}else
		alert("ordem jah escolhida");
}

function escreveNivel(texto){
	if(document.getElementById("nivel").firstChild!=null)
		document.getElementById("nivel").replaceChild(document.createTextNode(texto),document.getElementById("nivel").firstChild);
	else
		document.getElementById("nivel").appendChild(document.createTextNode(texto));
}

function escreveHistoria(){
	var texto = "Enunciado: "+document.appletTree.getHistoria();
	if(document.getElementById("historia").firstChild!=null)
		document.getElementById("historia").replaceChild(document.createTextNode(texto),document.getElementById("nivel").firstChild);
	else
		document.getElementById("historia").appendChild(document.createTextNode(texto));
}

function limpaSelect(select){
	escreveNivel('');
	var elSel = document.getElementById(select);
	var i;
	for (i = elSel.length - 1; i>=0; i--) {
	 
	    elSel.remove(i);   
	}
}

function preencheOpcoes(nivel){
	limpaSelect("opcoes");
	if(nivel>=document.appletTree.qntNiveis())return;
	nivelAtual = nivel;
	var i=0;
	var opcao;	
	var nomeOpcao;
	
	escreveNivel("Nivel: "+document.appletTree.getNomeNivel(nivel));
	var qnt = document.appletTree.qntOpcoes(nivel);
	for(i=0;i<qnt;i++){
		nomeOpcao = document.appletTree.getNomeOpcao(parseInt(nivel),parseInt(i));
		
		opcao = document.createElement("option");
		opcao.text = nomeOpcao;
		opcao.value = i;
		
		try {
			document.getElementById('opcoes').add(opcao, null); // standards compliant; doesn't work in IE
		}catch(ex) {
		    document.getElementById('opcoes').add(opcao); // IE only
		}
				
	}
}


function getNiveis(){
	var niveis = document.getElementById('escolhidos');	
		
	var i,nomeOpcao,opcao;
	
	var qnt = document.appletTree.qntNiveis();
	niveis.size=qnt;	
	for(i=0;i<qnt;i++){
		nomeOpcao = document.appletTree.getNomeNivel(i);
		
		opcao = document.createElement("option");
		opcao.text = nomeOpcao;
		opcao.value = i;
		
		try {
			niveis.add(opcao, null); // standards compliant; doesn't work in IE
		}catch(ex) {
		    niveis.add(opcao); // IE only
		}
				
	}
}

function up(){
	var escolhidos = document.getElementById('escolhidos');	
	var index = escolhidos.selectedIndex; 
	if(index<0)return;
	var ordena = new Array(escolhidos.size);
	
	var i;
	for(i=0;i<escolhidos.size;i++){
		ordena[i] = escolhidos.options[i] ;
	}
	
	if(index > 0){
		var tmp = ordena[index-1];				
		
		ordena[index-1] = ordena[index];
		ordena[index] = tmp; 
	}

	for(i=0;i<escolhidos.size;i++){
		escolhidos.options[i] = ordena[i];
	}
}

function down(){
	var escolhidos = document.getElementById('escolhidos');	
	var index = escolhidos.selectedIndex; 
	if(index<0)return;
	
	var ordena = new Array(escolhidos.size);
	
	var i;
	for(i=0;i<escolhidos.size;i++){
		ordena[i] = escolhidos.options[i] ;
	}
	
	if(index+1 < escolhidos.size){
		var tmp = ordena[index];				
		
		ordena[index] = ordena[index+1];
		ordena[index+1] = tmp; 
	}

	for(i=0;i<escolhidos.size;i++){
		escolhidos.options[i] = ordena[i];
	}
	
}

function mostraOptions(){
	
	limpaSelect("tmpOptions");
	var escolhidos = document.getElementById('escolhidos');	
	var index = escolhidos.selectedIndex; 
	if(index<0)return;	
	var i=0;
	var opcao;	
	var nomeOpcao;
	
	var tmpOptions = document.getElementById("tmpOptions");
	var qnt = document.appletTree.qntOpcoes(escolhidos.options[index].value);	
	for(i=0;i<qnt;i++){
		nomeOpcao = document.appletTree.getNomeOpcao(parseInt(escolhidos.options[index].value),parseInt(i));
		
		opcao = document.createElement("option");
		opcao.text = nomeOpcao;
		opcao.value = i;
		
		try {			
			document.getElementById('tmpOptions').add(opcao, null); // standards compliant; doesn't work in IE
		}catch(ex) {
		    document.getElementById('tmpOptions').add(opcao); // IE only
		}
				
	}
}
</script>
<body>
<applet name="appletTree" code=br.uff.probabilidade.applet.Arvore.class width="600" MAYSCRIPT height="400" >
</applet>
<div><p style="height:10px" id="nivel"></p><select id="opcoes" style="width:150px"></select><input type="button" onclick="escolheOpcao()" value="escolher"></div>
<br>
<div><p id="historia" style="text-align: justify;width: 600px;"></p></div>
<br>
<div>
	<table>
		<tr>
			<td><select onchange="mostraOptions()" multiple="multiple" size="10" id="escolhidos" style="width:150px;height:150px;border:1;overflow: auto;background-color: white"></select></td>			
			<td align="center" valign="top">
				<a href="javascript:up()"><img border="0" id="up" src="br/uff/probabilidade/imagens/arrow_up.gif"></a>							
				<br><a href="javascript:down()"><img border="0" id="down" src="br/uff/probabilidade/imagens/arrow_down.gif"></a></td>
			<td><select disabled="disabled" multiple="multiple" size="10" id="tmpOptions" style="width:150px;border: 0;height:150px;background-color: white"></select></td>
				
		</tr>
		<tr><td align="right"><input id="escolher" type="button" onclick="escolheOrdem()" value=" ok "></td><td colspan="2">&nbsp;</td></tr>
	</table>
	
</div>
</body>
<script>getNiveis();escreveHistoria();</script>
</html>